<template>
    <view class="pages allPage">
        <!-- <view class="backmask"></view> -->

        <view class="headmask transBg3">
            <view class="parts userBox">
                <view v-if="locationJson.id">
                    <!-- <view class="address line" @click="$goNext('/pages/center/address/index?mode=choose')"> -->
                    <view class="address line" @click="handleOpenChooseAddr">
                        <view class="l">
                            <text class="text">{{ locationJson.location }} {{ locationJson.houseNumber }}</text>
                            <view class="name">
                                {{ locationJson.deliveryAddress }}
                            </view>
                        </view>
                        <view class="r">
                            <text class="iconfont icon-xiangyou1"></text>
                        </view>
                    </view>
                    <view class="name">{{ locationJson.contacts }} {{ locationJson.contactsPhone }}</view>
                </view>
                <view v-else>
                    <view class="address line" @click="$goNext('/pages/center/address/edit?tag=buy')">
                        <view class="l text-right">
                            <!-- <uni-icons type="plus" color='#565656' size="22"></uni-icons> -->
                            <text class="iconfont mr5 col-red">&#xe603;</text>
                            <text class="text">请先添加配送地址</text>
                        </view>
                        <view class="r">
                            <text class="iconfont icon-xiangyou1"></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="content">
            <!-- 产品信息 s-->
            <view class="parts msgBox mini good_list">
                <!-- <div class="goods_item" v-for="(item, idx) in productList" :key="idx">

                    <div class="goods_info">
                        <div class="imgbox" @click.stop="$goNext('/pages/supermarket/product/index?id='+item.goodsId)">
                            <img :src="$getImg(item.specificationsFileId)" mode="aspectFit" />
                        </div>
                        <div class="r-box">

                            <div class="name text-delic">
                                <span class="">{{ item.goodsName }}</span>
                            </div>

                            <div class="sbu_name text-delic" >
                                <span class="l text-delic">{{ item.specificationsName }}</span>
                                <span class="iconfont icon-xiangxia"></span>
                            </div>

                            <div class="price-box">
                                <div>
                                    <text class="">￥</text>
                                    <text class="big b">{{ item.payMoney }}</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->

                <view class="sec_item ul">
                    <view class="li" v-for="(item, idx) in productList" :key="key">
                        <view class="p productBox">
                            <view class="imgs">
                                <image :src="$getImg(item.specificationsFileId)" mode="aspectFit"></image>
                            </view>
                            <view class="info">
                                <view class="info-l">
                                    <view class="name text-delic2">
                                        <text class="">
                                            {{ item.goodsName }}
                                        </text>
                                    </view>
                                    <view class="bottom">
                                        <span class="stype">{{ item.specificationsName }}</span>
                                    </view>
                                </view>
                                <view class="info-r">
                                    <view class="price">
                                        <text class="min">￥</text>
                                        {{ item.payMoney }}
                                    </view>
                                    <view class="nums">
                                        <text>x {{ item.goodsNum }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 产品信息 e -->

            <view class="parts">
                <view class="selectList show">
                    <view class="line">
                        <view class="l">
                            <text class="text b">包装费</text>
                        </view>

                        <view class="r">
                            <text class="col-h f22">
                                ￥
                                <text class="big">0</text>
                            </text>
                        </view>
                    </view>
                    <view class="line">
                        <view class="l" @click="showTipsModele">
                            <text class="text b">运费</text>
                            <text class=""></text>
                            <text class="iconfont col-hui">&#xe639;</text>
                        </view>

                        <view class="r">
                            <text class="col-h f22">
                                ￥
                                <text class="big">{{ postFeeJson.totoal_est_yuan || '' }}</text>
                            </text>
                        </view>
                    </view>
                </view>
            </view>

            <view class="parts">
                <view class="line">
                    <view class="l">
                        <text class="text b">备注</text>
                    </view>

                    <view class="r" @click="showRemark = true">
                        {{ remark }}
                        <text v-show="!remark" class="iconfont b icon-xiangyou1"></text>
                    </view>
                </view>
                <view class="line">
                    <view class="l">
                        <text class="text b">支付方式</text>
                    </view>

                    <view class="r">
                        <text class="col-h b">微信支付</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- //底部选购盒子 -->
        <view class="buyToolbar">
            <view class="errorMsg" v-if="isError">
                <text class="col-red">
                    {{ errorMsg }}
                </text>
            </view>

            <view class="box">
                <view class="left">
                    <view class="price">
                        合计：￥
                        <text class="big price-col">{{ orderMoney }}</text>
                    </view>
                </view>
                <view class="button">
                    <button class="btn finish transBg" @click="authMessgaeFunc">支付订单</button>
                </view>
            </view>
        </view>

        <!-- <GetPhone :isShow.sync="showAuthorize" @finish="finishAuth" /> -->
        <RemarkPop :isShow.sync="showRemark" @finish="finishRemark" :msg="remark" />

        <LoadMask v-if="initMask" :showMask="false" />

        <ChooseAddr ref="ChooseAddr" @finish="fininshChooseAddr" />
    </view>
</template>

<script>
    // import GetPhone from '../../../components/GetPhone'
    import RemarkPop from '@/components/RemarkPop';

    import { GoPayOrder  } from '@/utils/pay.js';

    import { GoodsCarList, GoodsCarIdsMoney ,GoodsCarJoinAndOrder } from '@/api/http';
    const app = getApp();
    import ChooseAddr from '@/components/ChooseAddr';

    export default {
        components: { RemarkPop, ChooseAddr },
        data() {
            return {
                totalCount: { cateNum: 0, price: 0 }, //计算

                //弹出授权框
                showAuthorize: false,

                //地址信息
                locationJson: {},

                //超市详情
                supermarketInfo: {},

                //备注
                remark: '',
                showRemark: false,
                //生成订单的id
                orderIds: [],

                //选择的商品信息
                selectProduct: {},
                productList: [],

                //查询运费和时间
                postFeeJson: { totoal_est_yuan: 0 },
                initMask: false,

                isError: false,
                errorMsg: ''
            };
        },

        computed: {
            orderMoney() {
                return this.totalCount.price + this.postFeeJson.totoal_est_yuan;
            }
        },
        onShow() {
            // uni.setStorageSync('choose-addressId', row.id )
            // 判断是不是选了地址过来的
            let addressId = uni.getStorageSync('choose-addressId');

            this.getLocation(addressId);
        },
        onLoad(option) {
            //
            console.log('参数', option);

            // option.styleId = '1800456469280522241,1800456420630790146';

            app.laterToken(bool => {
                this.initPages(option);
            });
        },
        mounted() {},
        methods: {
            //初始化页面
            initPages(option) {
                let userId = app.globalData.userId;

                if (userId) {
                    let ids = option.styleId.split(',');

                    GoodsCarList({ ids }).then(res => {
                        if (res.code == 200) {
                            this.productList = res.data;

                            this.singgeCount();
                        }
                    });
                }
            },
            //计算选的几个商品的价格
            singgeCount() {
                let ids = this.productList.map(i => i.id);

                // console.log('11111111111111111',ids)

                GoodsCarIdsMoney(ids).then(res => {
                    // console.log('计算价格',res)
                    if (res.code == 200) {
                        this.totalCount = {
                            cateNum: ids.length,
                            price: res.data
                        };
                    }
                });
            },
            //打开地址弹窗
            handleOpenChooseAddr() {
                this.$refs.ChooseAddr.openFunc();
            },
            //选择地址后
            fininshChooseAddr(addressId) {
                this.getLocation(addressId);
            },
            showTipsModele() {
                uni.showModal({
                    title: '配送费说明',
                    content: '展示的配送费仅为预估配送费金额，实际配送费受配送距离、难度、时段、天气、运力、配送工具等因素影响，最终以支付订单时支付的配送费金额为准。',
                    showCancel: false,
                    confirmColor: '#ff305a',
                    success: res => {
                        if (res.confirm) {
                        }
                    }
                });
            },
            //获取地址
            getLocation(addressId) {
                if (addressId) {
                    this.$axios({
                        url: 'flash/supermarket/user/address/get',
                        data: addressId
                    }).then(res => {
                        this.locationJson = res.data;
                    });

                    return;
                }

                Promise.all([
                    this.$axios({
                        url: 'flash/supermarket/user/address/page/list',
                        data: {
                            pageNum: 1,
                            pageSize: 1,
                            isDefault: 1
                        }
                    }),
                    this.$axios({
                        url: 'flash/supermarket/user/address/page/list',
                        data: {
                            pageNum: 1,
                            pageSize: 1
                        }
                    })
                ])

                    .then(res => {
                        if (res[0].total > 0) {
                            this.locationJson = res[0].data[0];
                        } else if (res[1].total > 0) {
                            this.locationJson = res[1].data[0];
                        } else {
                            this.isError = true;
                            this.errorMsg = '请先添加配送地址！';

                            this.locationJson = {};
                        }
                    })
                    .catch(msg => {});
            },

            //下单前先授权一次消息
            authMessgaeFunc() {
                this.produceOrder();
                return;
            },
            //1.根据商品生成订单
            produceOrder() {
                if (this.isError) {
                    uni.showToast({
                        title: this.errorMsg,
                        icon: 'none'
                    });

                    return;
                }

                let ids = this.productList.map(i => i.id);

                uni.showLoading();

                GoodsCarJoinAndOrder({ ids })
                    .then(res => {

                        console.log('生成订单',orderRes )

                        uni.removeStorageSync('choose-addressId');

                        this.orderIds = orderRes.data;

                        this.gopay();
                    })
                    .finally(() => {
                        uni.hideLoading();
                    });
            },

            //结束了备注
            finishRemark(msg) {
                this.remark = msg;
            },
            //4.支付订单
            gopay() {
                GoPayOrder(
                    this.orderIds,
                    this.orderMoney,
                    success => {
                        this.$goNext('/pages/paySuccess/index?orderId=' + this.orderIds[0], 'redirectTo');
                    },
                    fail => {
                        uni.showModal({
                            content: '支付失败：可在个人中心 > 我的订单中 ，再次进行支付',
                            showCancel: false,
                            confirmText: '确定',
                            success: msg => {
                                this.$goNext('/pages/center/order/index', 'redirectTo');
                            }
                        });
                    }
                );
            },
            //空函数 阻止点击事件
            noneFunc() {}
        }
    };
</script>

<style scoped lang="scss">
    .parts {
        background: #fff;
        padding: 24rpx 30rpx;
        box-shadow: 0 0 20rpx #eaeaea;
        border-radius: 8px;
        margin-bottom: 20rpx;
        .line {
            color: #333;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 18rpx 0;
            &.none {
                padding-bottom: 8rpx;
            }
            .l {
                flex: 1;
                width: 100%;
                color: #000;
                font-size: 28rpx;
            }
            .r {
                margin-left: 10px;
                max-width: 500rpx;
                min-width: 50rpx;
                text-align: right;
                font-size: 28rpx;
            }
            .b {
                font-weight: bold;
            }
            .big {
                font-size: 32rpx;
            }
        }
        .tips {
            font-size: 22rpx;
            color: #ff7c8d;
            line-height: 1.2;
        }
    }
    .backmask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        // background: linear-gradient(#ff7c8d, #ffffff);
        z-index: 0;
        height: 400rpx;
    }
    .headmask {
        position: relative;
        z-index: 4;
        // height: 400rpx;
        padding: 24rpx 24rpx 20rpx;
        .userBox {
            padding: 40rpx 30rpx;
            .address {
                padding: 0rpx 0 10rpx;
                line-height: 50rpx;
                .text {
                    font-size: 32rpx;
                    color: #000;
                    // font-weight: bold;
                }
            }
            .name {
                font-size: 24rpx;
                color: #999;
                line-height: 1.5;
            }
        }
    }

    .content {
        position: relative;
        padding: 0rpx 24rpx 0;
        // margin-top: -40px;
    }

    /* //底部购物车 */
    .num {
        color: #fff;
        text-align: center;
        display: inline-block;
        border-radius: 24rpx;
        font-size: 22rpx !important;
        padding: 6rpx 10rpx;
        background: #f60;
        line-height: 1em;
    }
    .buyToolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        box-sizing: border-box;
        .errorMsg {
            width: 100%;
            background: rgba(255, 0, 0, 0.1);
            text-align: center;
            padding: 14rpx 0;
        }
        .box {
            width: 100%;
            display: flex;
            // height: 100rpx;
            background: #fff;
            padding: 20rpx 0;
            box-sizing: border-box;
            padding-bottom: var(--status-bar-height);
        }
        .box .left {
            flex: 1;
            padding: 10rpx 34rpx;
            .price {
                text-align: right;
                .big {
                    font-size: 44rpx;
                }
            }
        }
        .box .button {
            height: 100%;
            text-align: right;
        }
        .box .button .finish {
            // margin-top: 10px;
            margin-right: 10px;
            border-radius: 4px;
            width: 200rpx;
            height: 80rpx;
            line-height: 80rpx;
            padding: 0;
            font-size: 32rpx;
            border-radius: 20px;
            // background: #ff7c8d;
            transition: all 0.2s;
            color: #fff;
            &.disAble {
                background: #888;
            }
        }
    }

    /* //弹出选中明细 */
    .selectList {
        box-sizing: border-box;
        width: 100%;
        z-index: 12;
        // padding: 10px 0px 10px;
        background: #fff;
        font-size: 12px;
        // border-radius: 20rpx 20rpx 0 0;
        transition: all 0.4s;
        .head {
            display: flex;
            width: 100%;
            // margin-bottom: 20rpx;
            padding: 0 0rpx 20rpx;
            .head-l {
                color: #888;
                font-size: 34rpx;
                flex: 1;
                .min {
                    font-size: 24rpx;
                    color: #888;
                }
            }
        }
    }

    // 商品
    .good_list {
        padding: 20rpx 30rpx 20rpx;
    }
    .sec_item > .li {
        padding: 10rpx 0;
        // border-bottom: 1px solid #f1f1f1;
    }
    .productBox {
        display: flex;
        .imgs {
            margin-right: 28rpx;
            image {
                width: 140rpx;
                height: 140rpx;
                background: #f1f1fe;
                border-radius: 6px;
            }
        }
        .info {
            display: flex;
            width: 100%;
            padding-top: 10rpx;
            .info-l {
                flex: 1;
            }
            .info-r {
                text-align: right;
                min-width: 130rpx;
                margin-left: 10rx;
                font-size: 30rpx;
                .min {
                    font-size: 22rpx;
                }
                .nums {
                    text-align: right;
                    color: #888;
                    font-size: 26rpx;
                    margin: 6rpx 0;
                }
            }
            .name {
                font-size: 28rpx;
                color: #000;
                // font-weight: bold;
            }
            .bottom {
                padding-top: 10rpx;
                overflow: hidden;
                color: #f57a7a;
                font-size: 22rpx;
            }
        }
    }
    // 顶部切换
    $borderRadius: 30rpx;

    //商品样子
</style>
